@import url("var.less");
@import url("reset.less");
@import url("tools.less");

html,
body {
  width: 100%;
  height: 100%;
  font-size: 0.525rem;
  background: #f5f5f6;
  font-family: "微软雅黑";
  overflow-x: hidden;
}

//标题固定定位开始
.function{
    width: 100%;
    height: 2.15rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
    overflow: hidden;
    >a{
        display: block;
        width: 1.75rem;
        height: 1.75rem;
        background: rgba(0,0,0,0.3);
        border-radius: 50%;
        text-align: center;
        line-height: 1.75rem;
        font-size: 0.65rem;
        color: #fff;
        float: left;
    }
    >a:first-of-type{
        margin: 0.2rem 0 0 0.4rem;
    }
    >.icon-search{
        margin: 0.2rem 0 0 56%;
    }
    >.icon-flickr{
        margin: 0.2rem 0 0 0.55rem;
    }
}
//标题固定定位结束

//商品图片开始
#picture{
    width: 16rem;
    height: 16rem;
    overflow: hidden;
    position: relative;
    z-index: 2;
    >ul{
        width: 16rem;
        height: 16rem;
        
        >li{
            width: 16rem;
                    height: 16rem;
           
            >a{
                >img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    
}
//商品图片结束

//商品信息开始
.comm-details{
    width: 100%;
    height: 6.7rem;
    border-bottom: 1px solid #f3f3f3;
    background: #fff;
    box-shadow: 0 -2px 14px #ccc;
    z-index: 3;
    position: relative;
    >.comm-name{
        width: 12.65rem;
        height: 1.6rem;
        float: left;
        margin: 0.45rem 0 0 0.5rem;
        font-size: 0.65rem;
        color: #06191f;
        text-align: left;
        >img:first-of-type{
            width: 0.85rem;
            height: 0.7rem;
        }
    }
    >article:nth-of-type(2){
        width: 0.85rem;
        height: 1.55rem;
        float: right;
        margin: 0.6rem 1rem 0 0;
        text-align: center;
        >a{
            >i{
                display: block;
                font-size: 0.8rem;
                color: #66656d;
            }
            >p{
                margin-top: 0.3rem;
                font-size: 0.4rem;
                color: #5e5e5e;
            }
        }
    }
    >article:nth-of-type(3){
        height: 0.8rem;
        float: left;
        margin: 0.3rem 0 0 0.5rem;
        text-align: center;
        >p{
            float: left;
            font-size: 0.55rem;
            color: #ed4c06;
            line-height: 0.8rem;
            >span{
                font-size: 0.8rem;
            }
        }
        >div{
            float: left;
            margin: 0.25rem 0 0 0.45rem;
            width: 1.95rem;
            height: 0.525rem;
            border: 2px solid #c46640;
            border-radius: 5px;
            font-size: 0.4rem;
            color: #e46532;
            text-align: center;
            line-height: 0.4rem;
        }
    }
    >p{
        float: left;
        width: 100%;
        height: 0.5rem;
        margin-top: 0.85rem;
        padding: 0 0.55rem;
        >span{
            float: left;
            font-size: 0.5rem;
            color: #6b6b6b;
        }
        >span:nth-of-type(2){
            margin-left: 2.75rem;
        }
        >span:last-of-type{
            float: right;
        }
    }
    >songda{
        float: left;
        width: 100%;
        height: 0.5rem;
        margin-top: 1.1rem;
        padding: 0 0.55rem;
        font-size: 0.5rem;
        color: #989898;
    }
}
//商品信息结束

//天猫超市促销积分开始
.tianmaochaoshi{
    width: 100%;
    height: 6.45rem;
    background: #fefaf7;
    margin-top: 0.5rem;
    border-bottom: 2px solid #e9e9e9;
    >img:first-of-type{
        width: 3.375rem;
        height: 0.85rem;
        float: left;
        margin: 0.5rem 0 0 0.6rem;
    }
    >section:first-of-type{
        float: left;
        width: 100%;
        height: 1.4rem;
        margin-top: 1rem;
        padding: 0 0.6rem;
        line-height: 1.4rem;
        border-bottom: 1px solid #f3efec;
        >span{
            float: left;
            height: 1.4rem;
            line-height: 1.4rem;
            font-size: 0.5rem;
            color: #95918e;
            >img{
                width: 0.5rem;
                height: 0.5rem;
                margin-right: 0.2rem;
            }
        }
        >span:nth-of-type(2){
            margin-left: 2.15rem;
        }
        >span:last-of-type{
            float: right;
            >a{
                font-size: 0.7rem;
                color: #c6c2bf;
            }
        }
    }
    >section:last-of-type{
        float: left;
        width: 100%;
        height: 1.6rem;
        margin-top: 0.7rem;
        padding: 0 0.6rem;
        line-height: 1.6rem;
        >article{
            float: left;
            width: 80%;
            height: 0.65rem;
            line-height: 0.65rem;
            >i{
                float: left;
                width: 1.2rem;
                height: 0.6rem;
                border: 2px solid #ae394b;
                text-align: center;
                line-height: 0.5rem;
                font-size: 0.4rem;
                color: #ab5055;
                border-radius: 4px;
            }
            >span{
                float: left;
                font-size: 0.5rem;
                color: #6a6b66;
                margin-left: 0.25rem;
            }
        }
        >article:last-of-type{
            margin-top: 0.35rem;
        }
        >span{
            float: right;
            margin-top: -0.68rem;
            >a{
                font-size: 0.7rem;
                color: #c6c2bf;
            }
        }
    }
}
//天猫超市促销积分结束

//配送到开始
peisong{
    display: block;
    height: 1.875rem;
    line-height: 1.875rem;
    margin-top: 0.5rem;
    border-bottom: 1px solid #e9e9e9;
    background: #fff;
    padding: 0 0.6rem;
    >span{
        float: left;
        font-size: 0.55rem;
        color: #333333;
        >a{
            font-size: 0.7rem;
            color: #c6c2bf;
        }
    }
    >span:last-of-type{
        float: right;
    }
}
//配送到结束

//宝贝评价开始
.evaluate{
    padding: 0 0.6rem;
    height: 13.2rem;
    background: #fff;
    margin-top: 0.5rem;
    border-bottom: 1px solid #eaeaea;
    overflow: hidden;
    >header{
        height: 0.55rem;
        font-size: 0.55rem;
        color: #252525;
        margin-top: 0.65rem;
    }
    >label{
        float: left;
        border-radius: 20px;
        background: #f8e9e6;
        text-align: center;
        margin: 0.65rem 0 0 0.25rem;
        font-size: 0.5rem;
        color: #524847;
        width: 4.5rem;
        height: 1.3rem;
        line-height: 1.3rem;
    }
    >label:first-of-type{
        margin-left: 0;
    }
    >label:nth-of-type(4){
        margin-left: 0;
    }
    >label:nth-of-type(5){
        width: 5.05rem;
    }
    >label:nth-of-type(6){
        width: 3.95rem;
        background: #f5f5f5;
    }
    >.userName{
        height: 1.1rem;
        float: left;
        margin-top: 0.75rem;
        line-height: 1.1rem;
        >img:first-of-type{
            float: left;
            width: 1rem;
            height: 1rem;
        }
        >img:last-of-type{
            float: left;
            width: 3.3rem;
            height: 0.65rem;
            margin: 0.2rem 0 0 0.25rem;
        }
        >span{
            float: left;
            margin-left: 0.25rem;
            font-size: 0.6rem;
            color: #0e1821;
        }
    }
    >content{
        float: left;
        margin-top: 0.25rem;
        height: 1.3rem;
        line-height: 0.7rem;
        font-size: 0.52rem;
        color: #202328;
    }
    >span{
        float: left;
        display: block;
        font-size: 0.4rem;
        color: #8b8b8b;
        margin-top: 0.55rem;
    }
    >btn{
        float: left;
        display: block;
        width: 4.9rem;
        height: 1.05rem;
        border: 2px solid #f18561;
        text-align: center;
        line-height: 1.05rem;
        font-size: 0.6rem;
        color: #e7692e;
        border-radius: 7px;
        margin: 1.75rem 0 0 2.3rem;
    }
}
//宝贝评价结束

//底部加入购物车开始
footer{
    width: 100%;
    height: 2.125rem;
    border-top: 2px solid #e5e0e7;
    -position: fixed;
    -bottom: 0;
    -left: 0;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    >a{
        display: block;
        height: 100%;
        background: #fff;
        >i {
            display: block;
            font-size: 0.8rem;
            color: #919191;
            text-align: center;
            margin-top: 0.325rem;
        }
        >p {
            margin-top: 0.2rem;
            height: 0.4rem;
            font-size: 0.4rem;
            color: #666666;
            text-align: center;
        }
    }
    >a:first-of-type{
        -webkit-box-flex: 1;
        border-right: 2px solid #f5f5f5;
    }
    >a:nth-of-type(2){
        -webkit-box-flex: 2;
    }
    >a:nth-of-type(2)>p>span{
        color: #d9713e;
    }
    >a:last-of-type{
        -webkit-box-flex: 4;
        background: #fe9402;
        text-align: center;
        line-height: 2.125rem;
        font-size: 0.6rem;
        color: #fff;
    }
}
//底部加入购物车结束











